<template>
	<view class="detail-online">
		<view class="top">
			<view class="t-block">
				<image class="cover" :src="dataObj.image_url"></image>
				<view class="title ellipsis-2">{{dataObj.name}}</view>
				<view class="teacher ellipsis-1">课程讲师：{{dataObj.teacher}}</view>
			</view>
		</view>
		<view class="catalog">
			<view class="catalog-item" :class="pageObj.catalogIdex === idx ? 'selected' : ''" v-for="(item, idx) in pageObj.catalogs" :key="item.id" @click="onCatalogTap(idx)">{{item.title}}</view>
		</view>
		<swiper
			class="body-swiper"
			:style="{height: pageObj.swiperheight + 'px'}"
			:current="pageObj.catalogIdex"
			@change="bodySwiperChange">
			<!-- 目录 -->
			<swiper-item class="body-swiper-item">
				<view class="menu">
					<view class="block">
						<view class="header">共{{dataObj.menuList.length}}学时</view>
						<!-- 目录列表 -->
						<!-- <menu-list
							:list="dataObj.menuList"
							@setSwiperHeight="setSwiperHeight">
						</menu-list> -->
						<view class="menu-list">
							<view class="menu-item" v-for="(mItem, idx) in dataObj.menuList" :key="mItem.id">
								<view class="menu-title ellipsis-1" @click="onVideoTap(mItem.id)">
									<span>{{(idx + 1) > 9 ? (idx + 1) : '0' + (idx + 1)}}.{{mItem.name}}</span>
									<image class="arrow" src="../../static/images/common/arrow-right.png">
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- 课程概述 -->
			<swiper-item class="body-swiper-item">
				<view class="summary">
					<view class="block">
						<view class="header">课程概述</view>
						<view class="intro">{{dataObj.brief || '暂无概述'}}</view>
					</view>
				</view>
			</swiper-item>
			<!-- 模拟题库 -->
			<!-- <swiper-item class="body-swiper-item">
				<view class="question">
					<view class="block">
						<view class="header">模拟题库</view>
						<view class="table">
							<view class="th">
								<view class="td"></view>
								<view class="td title">模拟考试</view>
								<view class="td title">答案</view>
								<view class="td title">解析</view>
								<view class="td title">错题</view>
							</view>
							<view class="th">
								<view class="td title">模拟题库</view>
								<view class="td">30次</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
							</view>
							<view class="th">
								<view class="td title">解析能力</view>
								<view class="td">18次</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
							</view>
						</view>
						<view class="table">
							<view class="th">
								<view class="td"></view>
								<view class="td title">模拟考试</view>
								<view class="td title">答案</view>
								<view class="td title">解析</view>
								<view class="td title">错题</view>
							</view>
							<view class="th">
								<view class="td title">模拟题库</view>
								<view class="td">30次</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
							</view>
							<view class="th">
								<view class="td title">解析能力</view>
								<view class="td">18次</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.hook"></image>
								</view>
								<view class="td">
									<image class="state" :src="pageObj.fork"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="block">
						<view class="header">题库简介</view>
						<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
						<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
						<view class="intro">近期新冠疫苗接种主要围绕重点地区重点人群开展，国家卫健委疾控局副局长吴良有介绍，近期新冠病毒疫苗接种主要围绕“两个重点”开展，一是重点地区，优先确保全国疫情发生风险高的口岸城市、边境地区、大中型城市，以及既往发生过聚集性疫情的地区重点推进接种工作。二是重点人群，包括冷链从业人员、医疗卫生人员、机关企事业单位人员、高等院校学生及教职工、大型商超服务人员和保障社会运行的交通、物流、福利机构相关人员等重点人员。 </view>
					</view>
				</view>
			</swiper-item> -->
		</swiper>
		
		<!-- 微信小程序隐藏 -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- 底部加入购物车 -->
		<footer-cart-buy
			v-if="dataObj.productId"
			:productId="dataObj.productId"
			:price="dataObj.price"
			:type="1">
		</footer-cart-buy>
		<!-- #endif -->
	</view>
</template>

<script>
	import hook from '@/static/images/common/hook.png';
	import fork from '@/static/images/common/fork.png';
	
	import arrowUp from '@/static/images/common/arrow-up.png';
	import arrowDown from '@/static/images/common/arrow-down.png';
	import footerCartBuy from '@/components/footer/footer-cart-buy.vue';
	// import menuList from '@/components/common/menu-list.vue';
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		components: {
			footerCartBuy,
			// menuList
		},
		data() {
			return {
				pageObj: {
					hook: hook,
					fork: fork,
					swiperheight: 0,
					// 菜单类型
					catalogIdex: 0,
					catalogs: [{
						id: 1,
						title: '目录'
					}, {
						id: 2,
						title: '课程概述'
					}]
				},
				dataObj: {
					id: '',
					image_url: '',
					title: '',
					teacher: '',
					intro: '',
					price: '0.00',
					sumClass: 0,
					productId: '',
					menuList: []
				}
			}
		},
		onLoad(event) {
			this.dataObj['id'] = event['id'];
			this.getDetail(); // 获取详情数据
			this.getVideoList(); // 获取视频列表
			this.postAddBrowsing(); // 添加我的足迹
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		onReady() {
			this.setSwiperHeight();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetail();
			this.getVideoList(); // 获取视频列表
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 菜单类型点击事件
			onCatalogTap (index) {
				this.pageObj['catalogIdex'] = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				this.pageObj['catalogIdex'] = event.detail.current;
				this.$nextTick(function(){
					this.setSwiperHeight();
				});
			},
			// 计算三个主体的高度
			setSwiperHeight () {
				const index = this.pageObj['catalogIdex'];
				const className = ['.menu', '.summary', '.question']; // 主体类名
				const query = uni.createSelectorQuery().in(this);
				query.select(className[index]).boundingClientRect(data => {
					this.pageObj['swiperheight'] = data.height;
				}).exec();
			},
			// 视频
			onVideoTap(id) {
				uni.navigateTo({
					url: '/pages/video/detail?id=' + id
				});
			},
			// 获取详情数据
			getDetail() {
				this.$Requset({
					url: this.$Api['course']['detail'],
					data: {
						id: this.dataObj['id'],
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 处理数据
						this.dataObj['image_url'] = data['image_url'];
						this.dataObj['name'] = data['name'];
						this.dataObj['teacher'] = data['teacher'];
						this.dataObj['price'] = data['price'];
						this.dataObj['productId'] = data['product']['id'];
						this.dataObj['brief'] = data['brief'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取视频列表
			getVideoList() {
				this.$Requset({
					url: this.$Api['course']['getvideolist'],
					data: {
						onclass_id: this.dataObj['id']
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 处理数据
						this.dataObj['menuList'] = data['list'];
						if (data['onclass_type']) {
							uni.setNavigationBarTitle({
							　　title: '在线课程详情'
							})
						} else {
							uni.setNavigationBarTitle({
							　　title: '线下课程详情'
							})
						}
						setTimeout(()=>{
							this.setSwiperHeight();
						}, 200);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取数据
			postAddBrowsing() {
				this.$Requset({
					url: this.$Api['course']['addBrowsing'],
					data: {
						onclass_id: this.dataObj['id'],
					},
					success: (res) => {
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	*{
		word-wrap: break-word;
	}
	.detail-online {
		box-sizing: border-box;
		position: relative;
		// 头部模块
		.top {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 282rpx;
			padding-top: 60rpx;
			background-image: linear-gradient(#FCE4CF, #FFFFFF);
			.t-block {
				position: relative;
				width: 678rpx;
				height: 204rpx;
				margin: 0 auto;
				background-color: #FFFFFF;
				border-radius: 18rpx;
				box-shadow: 0 0 15rpx rgba($color: #000000, $alpha: 0.1);
				.cover {
					position: absolute;
					top: -30rpx;
					left: 30rpx;
					width: 254rpx;
					height: 156rpx;
					background-color: #eee;
					border-radius: 14rpx;
				}
				.title {
					height: 80rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #1A1A1A;
					padding: 20rpx 30rpx 0 300rpx;
					margin-bottom: 45rpx;
				}
				.teacher {
					line-height: 40rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					padding-left: 30rpx;
				}
			}
		}
		// 菜单
		.catalog {
			position: absolute;
			top: 282rpx;
			left: 0;
			display: flex;
			width: 100%;
			height: 80rpx;
			background-color: #FFFFFF;
			margin-bottom: 18rpx;
			
			&-item {
				flex: 1;
				position: relative;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #7F7F7F;
				text-align: center;
				&.selected{
					color: $color-common;
					font-weight: bold;
				}
				&.selected::after{
					content: '';
					display: block;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					margin-left: -16rpx;
					width: 32rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: $color-common;
				}
			}
		}
		.body-swiper{
			padding-top: 380rpx;
			padding-bottom: 100rpx;
			.body-swiper-item{
				height: 100%;
			}
		}
		// 模块
		.block {
			background-color: #fff;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			border-radius: 22rpx;
			&:nth-last-child(1) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.header {
				line-height: 46rpx;
				font-size: 32rpx;
				color: #1A1A1A;
			}
			// 目录
			.menu-list {
				.menu-item {
					.menu-title {
						position: relative;
						line-height: 40rpx;
						font-size: 30rpx;
						color: #1A1A1A;
						padding: 34rpx 40rpx 34rpx 0;
						word-wrap: break-word;
						.arrow {
							position: absolute;
							top: 39rpx;
							right: 0;
							width: 30rpx;
							height: 30rpx;
						}
					}
					.class-list {
						border-radius: 12rpx;
						background-color: #F7F7F7;
						.class-item {
							line-height: 36rpx;
							font-size: 26rpx;
							color: #7F7F7F;
							padding: 22rpx 26rpx;
							border-bottom: 1rpx solid #EAEFF1;
							&:nth-last-child(1){
								border-bottom: none;
							}
						}
					}
				}
			}
			// 课程简介内容
			.intro{
				line-height: 54rpx;
				font-size: 28rpx;
				color: #373737;
				padding-top: 12rpx;
			}
			.table{
				// height: 156rpx;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				margin-top: 22rpx;
				.th{
					box-sizing: border-box;
					display: flex;
					height: 52rpx;
					border-bottom: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-bottom: none;
					}
				}
				.td{
					box-sizing: border-box;
					flex: 1;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #1A1A1A;
					text-align: center;
					border-right: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-right: none;
					}
					.state{
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
				.title{
					color: #7F7F7F;
				}
			}
		}
	}
</style>
